<template>
	<view class="content">
		<view style="width: 750rpx;background: #ff4141;height: 750rpx;border-radius: 750rpx;margin-top: -650rpx;"></view>
		<view style="margin-top: 50rpx;">
			<u-avatar :src="$store.state.common.systemInfo.fileurl + 'avatar/' + message.uid + '.jpg'" size="50"></u-avatar>
		</view>
		<view style="font-weight: bold;margin-top: 8rpx;">
			{{message.name}}的红包
		</view>
		<view style="margin-top: 18rpx;color: #b5b5b5;">
			{{message.content ? message.content : '恭喜发财'}}
		</view>
		<view style="margin-top: 25rpx;color: #e8c87b;font-size: 60rpx;font-weight: bold;">
			{{message.money}}
		</view>
		
		<view style="display: flex;align-items: center;color: #b5b5b5;font-size: 25rpx;margin-top: 50rpx;width: 100%;margin-left: 60rpx;">
			<text v-if="message.timelong > 0">红包数量:{{message.timelong}},已领取:{{list.length}}</text>
		</view>
		
		<view style="display: flex;flex-direction: column;padding: 15rpx;width: 100%;">
			<view v-for="(item,k) in list" style="margin-top: 1rpx;display: flex;width: 100%;align-items: center;justify-content: space-between;padding: 25rpx;border-bottom: 1rpx solid #f8f8f8;">
				<view style="display: flex;align-items: center;">
					<u-avatar :src="$store.state.common.systemInfo.fileurl + 'avatar/' + item.uid + '.jpg'"></u-avatar>
					<view style="display: flex;flex-direction: column;margin-left: 15rpx;">
						<view class="">
							{{item.name}}
						</view>
						<view style="font-size: 20rpx;color: #b5b5b5;margin-top: 5rpx;">
							{{$u.timeFormat(item.time, 'mm-dd hh:MM:ss')}}
						</view>
					</view>
				</view>
				<view class="">
					{{item.money}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				message: {},
				list: []
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getdata(id)
		},
		methods: {
			getdata: async function(id) {
				const ret = await this.$u.get(`chat/chat/getredgetlog/${id}`)
				if (ret && ret.success) {
					this.message = ret.data.message
					this.list = ret.data.list
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		height: 100vh;
		overflow-y: auto;
	}
</style>